<template>
    <table border="1">
    <tbody>
        <div v-if="students.length == 0">
            <h1 style="color:red;">没有数据！</h1>
        </div>

        <div v-else>
            <tr v-for="(student, index) in students" :key="index">
                <td>
                    <div>
                        <img v-bind:src="student.photoUrl" width="50">
                    </div>
                </td>
                <td>{{ student.name }}</td>
                <td>{{ student.email }}</td>
                <td>{{ student.phone }}</td>
            </tr>
        </div>
    </tbody>
</table>
</template>

<script>
export default {
  name: "StudentList",
  data() {
    return {
      title: "学生列表",
      students: [
        {
          name: "小明",
          photoUrl: "./image/001.png",
          email: "xiaoming@qq.com",
          phone: "1234578900",
        },
        {
          name: "小红",
          photoUrl: "./image/002.png",
          email: "xiaohong@qq.com",
          phone: "1234578900",
        },
      ],
    };
  },
  methods: {
    update() {
      this.text = "vue.js+webapi教程";
    },
    count2() {
      return this.a + this.b;
    },
  },
};
</script>

<style>
</style>